<script setup>
import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
import { ref } from 'vue'
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiTextBox, mdiTextBoxOutline, mdiHomeVariant, mdiHomeVariantOutline } from '@mdi/js'
const route = useRoute()
const router = useRouter()
const routeName = ref(route.name);
router.afterEach((to, from) => {
  routeName.value = to.name;
});
const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent));

function TSNpush(d) {
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      router.push(d);
    });
  } else {
    router.push(d);
  }
};

</script>

<template>

  <div class="main"  :style="{ 'padding-left': route.meta.show_nav && !isMobile ? '80px' : '0px', 'height': '100%' }">
    <mdui-navigation-rail contained alignment="center" class="nobg" :value="routeName" v-show="route.meta.show_nav" v-if="!isMobile"
      style="border-right: 1px solid rgba(255,255,255,0.1);">
      <mdui-navigation-rail-item value="home" @click="TSNpush({ name: 'home' })">首页
        <svg-icon type="mdi" :path="mdiHomeVariant" slot="icon"></svg-icon>
        <svg-icon type="mdi" :path="mdiHomeVariantOutline" slot="active-icon"></svg-icon>
      </mdui-navigation-rail-item>
      <mdui-navigation-rail-item value="record" @click="TSNpush({ name: 'record' })">记录
        <svg-icon type="mdi" :path="mdiTextBox" slot="icon"></svg-icon>
        <svg-icon type="mdi" :path="mdiTextBoxOutline" slot="active-icon"></svg-icon>
      </mdui-navigation-rail-item>
    </mdui-navigation-rail>



    
    <mdui-navigation-bar :value="routeName" v-show="route.meta.show_nav" v-else>
      <mdui-navigation-bar-item value="home" @click="TSNpush({ name: 'home' })">首页
        <svg-icon type="mdi" :path="mdiHomeVariant" slot="icon"></svg-icon>
        <svg-icon type="mdi" :path="mdiHomeVariantOutline" slot="active-icon"></svg-icon>
      </mdui-navigation-bar-item>
      <mdui-navigation-bar-item value="record" @click="TSNpush({ name: 'record' })">记录
        <svg-icon type="mdi" :path="mdiTextBox" slot="icon"></svg-icon>
        <svg-icon type="mdi" :path="mdiTextBoxOutline" slot="active-icon"></svg-icon>
      </mdui-navigation-bar-item>
    </mdui-navigation-bar>
    <div style="height: 100%;">
      <router-view></router-view>
    </div>
    
  </div>

</template>

<style scoped>
</style>
